<template>
  <div class="hNav">
    <van-collapse v-model="activeNames">
      <van-collapse-item
        :title="item.title"
        :name="index"
        v-for="(item, index) in navs"
        :key="index"
        :icon="item.icon"
        :label="item.label"
        :title-class="[titleClass, item.titleClass]"
        :label-class="[labelClass, item.labelClass]">
        <ul class="ul">
          <li v-for="(item2, index2) in item.children" :key="index2" class="li">
            <a :href="item2.link" :target="item2.target == 1 ? '_blank' : ''" class="li_a">
              <div class="li_a_con">
                <h4 :class="item2.target == 1 ? 'primary' : 'info'" class="li_title">{{ item2.title }}</h4>
                <p class="li_desc">{{ item2.desc }}</p>
              </div>
              <div class="li_a_icon" v-if="item2.detail" @click.stop.prevent="detail(item2.detail)" title="点击查看详情">
                <van-icon :name="item2.icon ? item2.icon : 'info-o'" size="24" />
              </div>
            </a>
          </li>
        </ul>
      </van-collapse-item>
    </van-collapse>
    <div class="mask" v-if="isShow" @click="isShow = false">
      <div class="modalH">
        <div class="close" @click="isShow = false">
          <van-icon name="close" size="30" color="#fff" />
        </div>
        <div class="modalH_con">
          <div class="content">
            <img :src="detailImg" alt="" class="img" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { navs } from "./navs/index";
export default {
  computed: {
    navs() {
      return navs;
    },
    titleClass() {
      return {
        titleClass: "titleClass",
      };
    },
    labelClass() {
      return {
        labelClass: "labelClass",
      };
    },
  },
  data() {
    return {
      activeNames: [],
      detailImg: "",
      isShow: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.activeNames = this.navs.map((item, index) => {
        return index;
      });
    },
    go(h) {
      window.location.href = h;
    },
    detail(detail) {
      this.detailImg = detail;
      if (this.detail) {
        this.isShow = true;
      }
    },
  },
};
</script>

<style lang="scss">
.hNav {
  min-height: 100vh;
  margin-bottom: 42px;
  .titleClass {
    font-size: 16px;
    &-blue {
      color: #1989fa;
    }
    &-green {
      color: #07c160;
    }
  }
  .labelClass {
    font-size: 14px;
  }

  .ul {
    display: flex;
    flex-wrap: wrap;

    .li {
      margin-right: 10px;
      margin-bottom: 10px;
      background: rgba(255, 255, 255, 0.8);
      width: 24%;
      margin: 0.5%;
      padding: 15px;
      height: 75px;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
      border-radius: 8px;
      display: flex;
      &:hover {
        transform: translate3d(0, -2px, 0);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      }
      &_title {
        &.primary {
          color: #1989fa;
        }
        &.info {
          color: #07c160;
        }
      }
      &_desc {
        font-size: 12px;
        margin-top: 4px;
      }
      &_a {
        display: flex;
        width: 100%;
        &_icon {
          width: 40px;
        }
        &_con {
          flex-grow: 1;
        }
      }
    }
  }
  .van-button {
    font-size: 14px;
    transition: all 0.1s cubic-bezier(0.65, 0.05, 0.36, 1);
    &:hover {
      color: #fff;
      transform: scale(1.1);
      font-weight: bold;
    }
  }
  .van-button--plain.van-button--primary {
    &:hover {
      background-color: rgba(7, 193, 96, 0.8);
    }
  }
  .van-button--plain.van-button--info {
    &:hover {
      background-color: rgba(25, 137, 250, 0.8);
    }
  }
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  .modalH {
    max-height: 450px;
    width: 1000px;
    position: relative;
    &_con {
      // padding: 40px;
      text-align: center;
      overflow-y: auto;
      overflow-x: hidden;
      .content {
        .img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
    .close {
      position: absolute;
      top: -30px;
      right: -30px;
      cursor: pointer;
    }
  }
}
</style>
